<template>
    <div class="dailyClean-wrap">
        <component :is="comp" @compChange="onCompChange"></component>
    </div>
</template>

<script setup>
import { computed, ref } from "vue"
import dailyClean from "./dailyClean.vue"
import dailyFill from "./dailyFill.vue"
import location from "./location.vue"

const active = ref('dailyClean')


const onCompChange = (val) => {
    console.log("🚀 ~ onCompChange ~ val:", val)
    active.value = val
}

const comp = computed(() => {
    if (active.value == 'dailyClean') {
        return dailyClean
    } else if (active.value == 'dailyFill') {
        return dailyFill
    } else {
        return location
    }
})

</script>

<style lang="scss" scoped></style>